<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="icon" href="./img/(1).jpg">
    <script src="./js/jquery-1.7.2/jquery.min.js"></script>
    <script src="./js/index.js"></script>

    
    <title>花瓣网clone</title>
</head>
<body id="body">
    <div class="nav">
        <div class="containter">
            <div class="containter-left">
                <div class="containter-left-1">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="80px" height="28px" viewBox="0 0 80 28" version="1.1">
                        <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
                        <title>logo</title>
                        <desc>Created with Sketch.</desc>
                        <defs>
                            <linearGradient x1="99.999544%" y1="49.9986321%" x2="0%" y2="49.9986321%" id="linearGradient-1">
                                <stop stop-color="#E60012" offset="0%"/>
                                <stop stop-color="#E60012" stop-opacity="0.5" offset="100%"/>
                            </linearGradient>
                        </defs>
                        <g id="资源" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
                            <g id="Portrait" sketch:type="MSArtboardGroup" transform="translate(-314.000000, -523.000000)">
                                <g id="logo-2" sketch:type="MSLayerGroup" transform="translate(314.000000, 525.000000)">
                                    <path d="M0,6.30872727 C0,16.0789091 7.97797183,24 17.8158592,24 L24.0943099,24 L24.0943099,17.7665455 C24.0943099,7.99636364 16.116338,0.0752727273 6.2784507,0.0752727273 L0,0.0752727273 L0,6.30872727 L0,6.30872727 Z" id="Shape" opacity="0.5" fill="url(#linearGradient-1)" sketch:type="MSShapeGroup"/>
                                    <path d="M10.2619437,18.6501818 C17.8993521,18.6501818 24.0932113,12.4996364 24.0932113,4.91454545 L24.0932113,0.0741818182 L19.2187606,0.0741818182 C11.5802535,0.0741818182 5.38639437,6.22472727 5.38639437,13.8087273 L5.38639437,18.6501818 L10.2619437,18.6501818 L10.2619437,18.6501818 Z" id="Shape" opacity="0.5" fill="#E60012" sketch:type="MSShapeGroup"/>
                                    <path d="M49.3904789,20.3290909 C49.2729296,21.0381818 48.9477465,21.4330909 47.9656056,21.4330909 L44.3841972,21.4330909 C43.8381972,21.4330909 43.1790423,20.9509091 43.1790423,19.7716364 L43.1790423,15.4385455 C46.3682535,14.1305455 48.7467042,12.3676364 50.6318873,10.8338182 L49.7145634,9.47781818 C48.6038873,10.5152727 45.4838873,12.7210909 43.1790423,13.7072727 L43.1790423,7.43890909 L41.4740282,7.43890909 L41.4740282,14.1992727 L38.6594366,15.1167273 L39.1142535,16.6167273 L41.4740282,15.8312727 L41.4740282,20.2549091 C41.4740282,22.0014545 42.7725634,22.9265455 44.3292676,22.9265455 L48.1347887,22.9265455 C49.2916056,22.9265455 50.5703662,22.4650909 50.8120563,20.8854545 C50.9164225,20.2058182 50.9131268,19.3069091 50.9131268,18.6032727 L49.5036338,17.8854545 C49.4882535,19.1432727 49.5212113,19.5458182 49.3904789,20.3290909 L49.3904789,20.3290909 Z M45.1180563,0.152727273 L43.4657746,0.152727273 L43.4657746,3.18436364 L36.8797183,3.18436364 L36.8797183,0.152727273 L35.226338,0.152727273 L35.226338,3.18436364 L28.9248169,3.18436364 L28.9248169,4.84036364 L35.226338,4.84036364 L35.226338,7.38763636 L35.8459437,7.38763636 C34.9505915,8.86581818 33.8662817,10.3265455 32.5919155,11.7698182 C31.4559718,13.0614545 30.1123944,14.4021818 28.5633803,15.7952727 L29.7256901,17.1196364 C30.414507,16.5250909 31.1285915,15.8454545 31.8690423,15.0818182 L34.0772113,12.8574545 L34.0772113,23.4632727 L35.7558592,23.4632727 L35.7558592,10.9985455 C36.2842817,10.1192727 36.7028451,9.50181818 37.3949577,8.076 L36.2073803,7.38872727 L36.8786197,7.38872727 L36.8786197,4.84036364 L43.4646761,4.84036364 L43.4646761,7.45090909 L45.1169577,7.45090909 L45.1169577,4.84036364 L51.3932113,4.84036364 L51.3932113,3.18436364 L45.1169577,3.18436364 L45.1169577,0.152727273 L45.1180563,0.152727273 Z M70.8152113,5.06945455 C70.9865915,5.73163636 71.1590704,6.51381818 71.3315493,7.41381818 L71.5380845,8.63672727 C71.5545634,8.79054545 71.5897183,8.99345455 71.6413521,9.24872727 C71.6929859,9.53781818 71.7270423,9.74072727 71.7446197,9.85963636 L73.061831,9.47781818 C72.8893521,8.56036364 72.7344507,7.77927273 72.5971268,7.13454545 C72.4246479,6.26836364 72.2356901,5.46218182 72.0291549,4.71490909 L70.8152113,5.06945455 L70.8152113,5.06945455 Z M73.32,3.00545455 L70.092338,3.00545455 L70.092338,4.45745455 L77.6078028,4.45745455 L77.6078028,3.00545455 L74.8184789,3.00545455 L74.6635775,2.34327273 C74.6119437,2.07163636 74.5603099,1.84254545 74.5086761,1.65490909 C74.3702535,1.128 74.2153521,0.627272727 74.0439718,0.151636364 L72.5465915,0.559636364 L72.9860282,1.83381818 L73.32,3.00545455 L73.32,3.00545455 Z M56.0424507,9.75709091 L57.359662,9.37418182 C57.1707042,7.91454545 56.8696901,6.37745455 56.4555211,4.764 L55.2163099,5.14581818 C55.5425915,6.60654545 55.818338,8.14363636 56.0424507,9.75709091 L56.0424507,9.75709091 Z M61.7243662,3.00545455 L59.1679437,3.00545455 C59.0470986,2.47963636 58.9262535,2.004 58.806507,1.57963636 C58.6516056,1.01890909 58.4868169,0.493090909 58.3154366,0 L56.8696901,0.458181818 L57.3091268,1.75745455 C57.4464507,2.23309091 57.558507,2.64872727 57.6452958,3.00545455 L54.4429014,3.00545455 L54.4429014,4.45745455 L61.7254648,4.45745455 L61.7254648,3.00545455 L61.7243662,3.00545455 Z M77.9176056,11.5145455 L77.9176056,10.0363636 L75.3600845,10.0363636 C75.894,8.40654545 76.3334366,6.75054545 76.6772958,5.06945455 L75.2568169,4.61018182 L74.7152113,7.38763636 C74.4910986,8.40654545 74.2680845,9.29018182 74.0439718,10.0374545 L70.1439718,10.0374545 L70.1439718,11.5156364 L73.1134648,11.5156364 L73.1134648,15.3872727 L70.6866761,15.3872727 L70.6866761,16.8905455 L73.1134648,16.8905455 L73.1134648,23.2592727 L74.6888451,23.2592727 L74.6888451,16.8905455 L77.658338,16.8905455 L77.658338,15.3872727 L74.6888451,15.3872727 L74.6888451,11.5156364 L77.9176056,11.5156364 L77.9176056,11.5145455 Z M69.4463662,8.53418182 C69.3947324,7.20981818 69.3694648,5.19709091 69.3694648,2.49709091 L70.170338,2.34436364 C70.2900845,2.328 70.3944507,2.30181818 70.4801408,2.268 L69.9890704,0.841090909 C67.733662,1.368 65.1684507,1.79236364 62.292338,2.11527273 L62.292338,6.39490909 C62.292338,7.34618182 62.2835493,8.16981818 62.2670704,8.86690909 C62.2670704,9.71563636 62.249493,10.488 62.2154366,11.1850909 C62.1297465,12.7483636 61.9836338,14.1316364 61.7770986,15.3370909 C61.2948169,18.0545455 60.3390423,20.4152727 58.9108732,22.4192727 L60.2533521,23.3869091 C61.7342535,21.1450909 62.7152958,18.5203636 63.1975775,15.5149091 C63.4216901,14.1894545 63.5678028,12.6447273 63.6370141,10.8785455 C63.6886479,10.1138182 63.7150141,9.25745455 63.7150141,8.30509091 C63.731493,7.524 63.7402817,6.59018182 63.7402817,5.50254545 L63.7402817,3.36327273 L64.979493,3.21054545 L65.0047606,21.3229091 L64.3456056,21.4385455 C64.3456056,21.4385455 64.4455775,22.1138182 64.5257746,22.6429091 C65.0541972,22.5534545 67.3337746,21.8618182 67.8786761,21.5890909 C67.9665634,22.0341818 68.0588451,22.4127273 68.1302535,23.0290909 L69.3694648,22.6221818 C69.3694648,22.6221818 68.2368169,18.5192727 67.9610704,17.6018182 L67.0657183,17.8341818 C67.3579437,18.9894545 67.5578873,19.7989091 67.6941127,20.5232727 C67.236,20.7316364 66.6889014,20.9105455 66.4252394,20.9574545 L66.4516056,3.03054545 C67.0195775,2.94654545 67.5106479,2.86145455 67.9237183,2.77636364 C67.9929296,7.48036364 68.1390423,10.9287273 68.3631549,13.1192727 C68.7410704,17.2123636 69.5595211,20.592 70.8163099,23.2581818 L72.1071549,22.4181818 C70.9360563,20.1927273 70.1615493,17.0007273 69.7825352,12.8389091 C69.6100563,11.2778182 69.498,9.84218182 69.4463662,8.53418182 L69.4463662,8.53418182 Z M61.3365634,15.1069091 L58.728507,15.1069091 L58.8054085,13.8589091 C58.8229859,13.5534545 58.8482535,12.7210909 58.8834085,11.3618182 L61.6210986,11.3618182 L61.6210986,9.88472727 L59.5030141,9.88472727 C59.9852958,8.30509091 60.3895775,6.69163636 60.7169577,5.04436364 L59.2701127,4.66145455 C58.9251549,6.648 58.5637183,8.38909091 58.1858028,9.88472727 L54.1572676,9.88472727 L54.1572676,11.3618182 L57.3332958,11.3618182 C57.3332958,12.5170909 57.324507,13.3145455 57.3080282,13.7563636 C57.3080282,13.9603636 57.2992394,14.172 57.2827606,14.3923636 L57.2311268,15.1058182 L54.390169,15.1058182 L54.390169,16.6090909 L57.1025915,16.6090909 C56.8784789,17.9170909 56.6027324,18.9109091 56.2764507,19.5894545 C55.8798592,20.4392727 55.2261972,21.2530909 54.3143662,22.0352727 L55.5535775,23.2581818 C56.5346197,22.2894545 57.2585915,21.2541818 57.7232958,20.1501818 C57.929831,19.6570909 58.1012113,19.1050909 58.2396338,18.4941818 C58.3604789,17.9858182 58.4802254,17.3563636 58.6010704,16.6101818 L61.3387606,16.6101818 L61.3387606,15.1069091 L61.3365634,15.1069091 Z" id="Shape" fill="#03061F" sketch:type="MSShapeGroup"/>
                                </g>
                            </g>
                        </g>
                    </svg>
                </div>
                <div class="containter-left-2"><a>首页</a></div>
                <div class="containter-left-3"><a>发现</a></div>
                <div class="containter-left-4"><a>最新</a></div>
                <div class="containter-left-6"><a>活动</a></div>
                <div class="containter-left-7"><a>美术</a></div>
                <div class="containter-left-8"><a>设计服务</a></div>
                <div class="containter-left-9"><a>花瓣LIVE</a></div>
                <div class="containter-left-10"><a>花瓣Pro</a></div>
            </div>
            <div class="containter-right">

                    <input type="text" value="输入搜索内容...">
                    <input type="submit" value="搜索">
                    
            </div>
        </div>
    </div>
    <div class="header">   
        <div class="header-middle">
            <div class="header-top"><span>- 插画/漫画 -</span></div>
            <div class="header-down">
                <span class="header-down-1">采集</span>
                <span class="header-down-2">推荐画板</span>
                <span class="header-down-3">推荐用户</span>
            </div>
        </div>
    </div>
    <div class="contents">
        <div class="contents-body" id="bodyBox">
            <ul class="contents-body-head">    
                <li><img src="./img/(1).jpg" alt=""></li>
                <li><img src="./img/(1).png" alt=""></li>
                <li><img src="./img/(2).jpg" alt=""></li>
                <li><img src="./img/(3).jpg" alt=""></li>
                <li><img src="./img/(4).jpg" alt=""></li>
                <li><img src="./img/(5).jpg" alt=""></li>
            </ul>   
            <div class="contents-body-con" id="div">
                <ul id="ul1">                  
                </ul> 
                <ul id="ul2">                
                </ul>
                <ul id="ul3"></ul>
                <ul id="ul4"></ul>
                <ul id="ul5"></ul>
                <ul id="ul6"></ul>               
                      
            </div>
            
        </div>
        
    </div>
    <div class="model">
        <div class="model-img">
            <div class="model-img-div">
                <img src="" title="点击空白处关闭" id="imgid">
            </div>
        </div>
    </div>
    
</body>
<script>
   
        var i = 0;
    $(document).scroll(function(){
        var ds = $(document).scrollTop();
        console.log(ds);
        var ws = $(window).height();
        console.log(ws);

        var dh = $(document).height();
        console.log(dh);
        // for(var i = 0; i <20; i++){
            
        // }
        if(ds+ws >= dh-10){
            console.log("我的i是"+i)
            // 当页面滚轮达到底部时.就开始加载图片
            // 图片多少根据下移数据决定
            i++;
            if(i >= 65){
                alert("sorry! 下面没有咯");
                return false;
            }
            demo(i);
        }
    })

        
       // 获取所有所要存储的ul
       var ulArr = document.querySelectorAll("#div>ul");
       // 获取滚动条的高度
       console.log(ulArr)

    //    jQuery(window).scroll( function (){
    //         var topScroll = jQuery(window).scrollTop();
    //         console.log(topScroll);
    //     });
        
        
        // for (var i = 0;i<20;i++){            
            // var src = "./img/pic/"+i+".jpg";          
           
            
         var demo = function(i){ $.ajax({
                url:"./data.php",
                type:"get",
                data:{
                    num:i
                },
                success:function(msg){
                    // console.log(msg);
                    var dataMsg = msg.split("</pre>");
                    // 接收服务器端数据;
                    
                    // console.log(dataMsg);
                        // 假设第一个最短
                        var minHeightLi = ulArr[0];
                        var count = 0;
                        for (var j = 0; j< ulArr.length; j++){
                        if (ulArr[j].offsetHeight <= minHeightLi.offsetHeight){
                            minHeightLi = ulArr[j];
                            // console.log(minHeightLi);
                            count = minHeightLi.id;
                             }
                         }
                        //  minHeightLi.append(dataMsg[1]);
                        //  dataMsg += dataMsg[1];
                    // 判断图片位置         
                    // dataMsg[1]
                  $("#"+count).append(dataMsg[1]);
                },
                error:function(){
                    alert("请求失败");
                }

            });           
        // }
        
            //  live 为实时的提供事件绑定;
            var cl = 0;
            $(".cla").live("click",function(){
                if (cl == 0){
                    console.log($(this));   
                    $(this).parent().next().css("display","block");
                    cl++;
                }else if (cl == 1){
                    $(this).parent().next().css("display","none");
                    cl = 0;
                }                
            })

            $(".contents-body-con-box").live("mouseenter",function(){
                $(this).css("marginTop","20px");
            })
            $(".contents-body-con-box").live("mouseleave",function(){
                $(this).css("marginTop","30px");
            })
            var Url;
            $("#img1").live("click",function(){
                // 获取点击图片时需要得到的图片地址
                // console.log($(this).attr("src"));
                    Url = $(this).attr("src");
                    console.log(Url)
                    $("#imgid").attr("src",Url);
                    $(".model").fadeIn();
                // 点击空白处模态框消失
                    $(".model").on("click",function(event){
                         $(".model").fadeOut();
                         event.proPagation();
                    })
            })
   
    // });
         }
         for(var i = 0; i <10; i++){
                demo(i);            
        }


</script>
</html>